<template>
  <!-- 推送设置组件 修改推送忽略内容 -->
  <div class="setting">
    <p>选择删除忽略标签</p>
    <el-tag
      v-for="(tag, index) in tags"
      :key="tag.id"
      closable
      @close="handlerClose(index, tag)"
      type="success"
    >
      {{ tag.tagName }}
    </el-tag>
  </div>
</template>

<script>
import getData from "../api/home";
export default {
  name: "setting",
  props: ["currentView", "isRating"],
  data() {
    return {
      tags: [
        // { tagName: "标签一" },
        // { tagName: "标签二" },
        // { tagName: "标签三" },
      ],
    };
  },
  watch: {
    // isRating: function(flag) {
    //   console.log(flag, "1111");
    //   if (flag === true && this.currentView === "setting") {
    //     this.getTags();
    //   }
    // },
  },
  computed: {},
  mounted() {
    this.getTags();
  },
  methods: {
    //删除标签
    handlerClose(index, tag) {
      // 掉接口删除
      getData.deleteDislike(tag.id).then((res) => {
        console.log(index, res);
        if (res.code === 200) {
          // 假删
          this.tags.splice(index, 1);
          // 关闭
          // this.$parent.$parent.isRating = false;
        }
        this.$store.commit("operationIsReGetTuisong", true);
        // 信息提示
        this.$notify({
          type: res.code === 200 ? "success" : "error",
          title: res.msg,
          message:
            res.code === 200 ? `已删除 【${tag.tagName}】` : "请稍后重试",
          position: "top-left",
        });
      });
      //
    },
    // 标签请求
    getTags() {
      const userid = this.$store.state.userInfo.userid;
      getData.selectDislike(userid).then((res) => {
        if (res.code === 200) {
          this.tags = res.data;
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.setting {
  min-height: 250px;
  max-height: 350px;
  > p {
    font-size: 16px;
    margin-bottom: 10px;
    color: #baffe5;
  }
  .el-tag {
    background: none;
    border-color: #2ed97a;
    margin-bottom: 10px;
    margin-right: 10px;
    // color: turquoise;
  }
}
</style>
